<template>
  <div>
    <el-header>
      <Header></Header>
    </el-header>
    <el-row :gutter="65">
      <el-col :span="5" :offset="1">
        <el-aside style="width: 100%; background: #e5d8d8; border: 1px solid #ffffff" >
          <el-row style="top: 10px">
            <!--            头像-->
            <el-col :span="5" :offset="3">
              <!--              <el-image-->
              <!--                style="width: 57px; height: 57px; border-radius: 50%;"-->
              <!--                :src="require('@/assets/img/common/header/csdnLog.png')"-->
              <!--                fit="fill"></el-image>-->
              <el-avatar :size="50" :src="require('@/assets/img/common/header/csdnLog.png')">

              </el-avatar>
            </el-col>
            <el-col :span="16">
              <el-row style="top: 10px">
                <el-col :span="21" :offset="3" style="font-size: 16px; font-family: 'Microsoft YaHei'">
                  H100
                </el-col>
                <el-col :span="21" :offset="3" style="font-size: 13px; font-family: 'Microsoft YaHei' ">
                  时间
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="top: 3px">
            <!--            作品点赞数-->
            <el-col :span="24" style="top: 10px;">
              <el-col :span="7" :offset="3" style="font-size: 12px;">
                {{ userBlogNums }}
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                {{ blogLikeNum }}
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                {{ blogCommentNum }}
              </el-col>

              <el-col :span="7" :offset="3" style="font-size: 12px;">
                原创
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                点赞数
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                评论数
              </el-col>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row>
            <!--            粉丝数-->
            <el-col :span="24">
              <el-col :span="7" :offset="3" style="font-size: 12px;">
                {{ funNums }}
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                {{ workCount }}
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                {{ likeSums }}
              </el-col>
              <el-col :span="7" :offset="3" style="font-size: 12px;">
                粉丝数
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                总点赞数
              </el-col>
              <el-col :span="7" style="font-size: 12px;">
                总评论数
              </el-col>
            </el-col>
          </el-row>
          <el-divider></el-divider>
          <el-row style="top: -11px">
            <!-- 私信 关注按钮-->
            <el-col :span="11" :offset="2" style="font-size: 12px;">
              <el-button round>私信</el-button>
            </el-col>
            <el-col :span="11" style="font-size: 12px;">
              <el-button round>关注</el-button>
            </el-col>
          </el-row>
        </el-aside>
      </el-col>
      <el-col :span="18">
<!--        <mavon-editor-->
<!--            class="mk_title"-->
<!--            :toolbarsFlag="false"-->
<!--            defaultOpen='preview'-->
<!--            :subfield="false"-->
<!--            value="blog"/>-->
        <!-- 标头展示-->
        <el-table
            :data="mytitle"
            style="width: 100%; right: 50px;"
            :show-header="false">
          <el-table-column
              prop="t"
              label="日期"
              width="180"
              >
          </el-table-column>
        </el-table>


        <mavon-editor
            :toolbarsFlag="false"
            defaultOpen='preview'
            :subfield="false"
            v-model="blog"/>

      </el-col>
    </el-row>


  </div>
</template>


<script>
import Header from '@/pages/common/header'
import {quillEditor} from "vue-quill-editor";
import MdEditor from '@/components/v-md-editor/index.vue';

export default {
  components: {
    Header,
    quillEditor,
    MdEditor
  },
  data() {
    return {
      mytitle:[
        {
          t:"Test"
        }
      ],
      workCount: '10',
      blogLikeNum:'',
      blogCommentNum:'',
      userBlogNums:'',
      likeSums:'',
      funNums:'',
      blog: "",
      editorValue: this.content != null ? this.content : "",
    }
  },
  computed: {},
  watch: {},
  methods: {
    handleScroll() {
      // 改变元素#searchBar的top值
      var scrollTop =
          window.pageYOffset ||
          document.documentElement.scrollTop ||
          document.body.scrollTop
      var offsetTop = document.querySelector('#recommendRight').offsetTop
      // 右侧：回到顶部图标,免费vip图标
      if (scrollTop === 0) {
        document.querySelector('#goTop').style.display = 'none'
        // document.querySelector('#freeVip').style.top = '500px'
      } else {
        document.querySelector('#goTop').style.display = 'block'
        // document.querySelector('#freeVip').style.top = '430px'
      }
    },
    /**
     * 获取详情博客
     */
    getBlogDetail(id) {
      this.$http({
        url: this.$http.adornUrl(`/blog/info/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.blog = data.info.blogText
        } else {
          console.log("该博客可能已被删除")
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    /**
     * 获取该文章点赞数，评论数
     * @param id
     */
    getAccessNum(id){
      this.$http({
        url: this.$http.adornUrl(`/blog/getAllNums/${id}`),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.blogLikeNum=data.data.LikeSum
          this.blogCommentNum=data.data.commentSum
          this.userBlogNums=data.data.blogNums
          this.likeSums=data.data.LikeSum
          this.funNums=data.data.funNums
        } else {
          console.log("该博客可能已被删除")
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },


  },
  beforeCreate() {
  },

  created() {
    let id = this.$route.query.id;
    this.getBlogDetail(id)
    this.getAccessNum(id)
  },

  beforeMount() {

  },

  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },

  beforeUpdate() {

  },

  updated() {

  },

  beforeDestroy() {

  },
  destroyed() {
// 离开该页面需要移除这个监听的事件
    window.removeEventListener('scroll', this.handleScroll)
  },

  activated() {

  }
}
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.mk_title.v-note-wrapper {
  height: 30px;
  width: 100%;
  right: 50px;
  min-height: 30px;
  margin: auto;
//display: flex; //position: fixed;
}


.v-note-wrapper {
  height: 80%;
  width: 100%;
  right: 50px;
  min-height: 500px;
  margin: auto;
//display: flex; //position: fixed;
}
</style>

